<!-- 这里是评论区 -->
<template>
  <div>
    <!-- 评论框组件 -->
    <commentFrame @reloadComment="loadPage()" />
    <!-- 评论内容 -->
    <p class="comment">
      全部评论
      <span>{{ total }}</span>
    </p>
    <comment
      :dataList="data"
      v-for="data in dataList.data"
      :key="data.id"
      @reloadComment="loadPage()"
    />
    <el-pagination
      background
      layout="total,prev, pager, next,sizes,jumper"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15]"
      @size-change="changeSize"
      @current-change="changeCurrent"
      :current-page="pageIndex"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import commentFrame from "@/components/post/commentFrame";
import comment from "../../pages/post/comment";
export default {
  components: { commentFrame, comment },
  data() {
    return {
      dataList: "",
      pageSize: 5,
      pageIndex: 0,
      total: null
    };
  },
  watch: {
    $route: {
      handler: function() {
        this.loadPage();
      },
      immediate: true
    }
  },
  methods: {
    loadPage() {
      var id = this.$route.query.id;
      this.$axios({
        url: "/posts/comments",
        params: {
          post: id,
          // _sort: desc,排序
          _limit: this.pageSize,
          _start: this.pageIndex
        }
      }).then(res => {
        // console.log("评论区的评论", res);
        this.dataList = res.data;
        this.total = res.data.total;
        this.$emit("setTotal", this.total);
      });
    },
    changeSize(pagesize) {
      // console.log(pagesize);
      this.pageSize = pagesize;
      this.loadPage();
    },
    changeCurrent(pageindex) {
      // console.log(pageindex);
      this.pageIndex = pageindex;
      this.loadPage();
    }
  }
};
</script>
<style lang="less" scoped>
.comment {
  margin-top: 20px;
  position: relative;
  padding: 0 7px;
  font-size: 16px;
  border-left: 3px solid #ec7259;
  span {
    font-size: 10px;
    background-color: #f56c6c;
    color: #fff;
    padding: 1px 4px;
    position: absolute;
    top: 3px;
    left: 78px;
  }
}
.el-pagination {
  margin-top: 20px;
}
</style>
